<template>
    <div class="redetails">
        <h3 class="cll_h3">退款订单详情</h3>
        <hr>
        <el-table ref="multipleTableRef" :data="redetaillist" style="width: 100%">

            <el-table-column label="订单号" width="120" align="center">
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column property="cuisine" label="配送产品" width="120" align="center" />
            <el-table-column property="refund" label="退款金额" align="center" show-overflow-tooltip width="120" />
            <el-table-column property="location" label="收货地址" align="center" show-overflow-tooltip width="120" />
            <el-table-column property="payment" label="付款状态" align="center" show-overflow-tooltip width="120" />
            <el-table-column property="order" label="订单状态" align="center" show-overflow-tooltip width="120" />
            <el-table-column property="name" label="收货人" align="center" show-overflow-tooltip width="120" />
            <el-table-column property="phone" label="收货人手机" align="center" show-overflow-tooltip width="120" />
            <el-table-column property="orderTime" label="下单时间" align="center" show-overflow-tooltip width="120" />
            <el-table-column label="" width="320" align="center">
                <template #default="scope">
                    <div v-if="scope.row.refundStatus === '待处理'">
                        <button class="button">修改退款金额</button>
                        <button class="button">审核不过</button>
                        <button class="button">审核通过</button>
                    </div>
                    <div v-else>
                        <button class="button">{{ scope.row.refundStatus }}</button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <hr class="hr2">
        <p class="redetext">照片</p>
        <hr>
        <div class="imgs">
            <img v-for="img in imgs" :src="img" alt="">
        </div>
        <p class="redetext">退款理由</p>
        <hr class="hr4">
        <p class="redetext">理由</p>
        <p class="reason">{{reason}}</p>
    </div>
</template>

<script  lang="ts">
import { defineComponent } from 'vue'
import { getredetail } from '@/api/refund'
export default defineComponent({
    name: 'redetails',
    data() {
        return {
            formInline: {
                user: '',
                region: '',
                toTime: '',
                fromTime: '',
            },
            redetaillist: [
                {
                    id: 454646,
                    cuisine: '男士餐',
                    refund: 300,
                    location: '长安大街',
                    payment: '已支付',
                    order: '已完成',
                    name: '李大宝',
                    phone: 1234567893548,
                    orderTime: new Date(),
                    refundStatus: '审核不过',
                },
            ],
            imgs: [],
            reason: '',
        }
    },
    async created() {
        // 接收路由传参
        // @ts-ignore
        this.redetaillist = [this.$route.query]

        // 发送请求 接收图片参数
        const res = await getredetail()
        // @ts-ignore
        const { imgs, reason } = res.info
        this.imgs = imgs
        this.reason = reason
    },
})
</script>

<style scoped lang="less">
// 原生样式
.button {
    height: 33px;
    border: none;
    background-color: rgb(215, 215, 215);
    margin: 0 4px;
    padding: 0 10px;
    cursor: pointer;
}

.redetext {
    font-size: 18px;
    color: #999;
    text-indent: 20px;

}

.hr2 {
    margin: 30px 0;
}

.hr4 {
    margin-bottom: 50px;
}

.imgs {
    display: flex;

    img {
        width: 300px;
        height: 150px;
        margin: 30px;
        border: 12px solid #ccc;
    }
}
.reason{
    padding: 30px 50px;
}


</style>

